// 课前预习模块
import React from 'react'
import '../css/fivestep.less';
// import { Link } from 'react-router-dom';

class Preview extends React.Component {
  state={
    hour:0,
    minute:0,
    second:0,
    isshow:true,
    classItem:[]
  }
  // 初始化加载钩子
  componentDidMount() {
    this.fometMillisecond(this.props.status.classinfo.courseTabVo.beginTime)
  }


  fometMillisecond(mss) {
    mss=parseInt(mss, 10);
    let nowtime=new Date(),
    timepoor=mss-nowtime.getTime()
    if(timepoor>0){  
      const hm = 1000 * 60 * 60;
      const mm = 1000 * 60;
      const sm = 1000;
      let hours = parseInt(timepoor / hm, 10);
      let minutes = parseInt((timepoor % hm) / mm, 10);
      let seconds = parseInt((timepoor % mm) / sm, 10);
      hours = hours > 9 ? hours : '0' + hours;
      minutes = minutes > 9 ? minutes : '0' + minutes;
      seconds = seconds > 9 ? seconds : '0' + seconds;
      this.setState({
        hour:hours,
        minute:minutes,
        second:seconds,
        isshow:true
      })
      setTimeout(()=>{this.fometMillisecond(mss);},1000)
      if((Number(hours)===0&&Number(minutes)===5&&Number(seconds)===0)){
        setTimeout(()=>{this.props.countdown()},1000)
      }else{
        return ""
      }
    }else{
      this.setState({
        hour:"00",
        minute:"00",
        second:"00",
        isshow:false,
      })
   
    } 
  };

  componentWillUnmount() {
    this.setState = () => {
      return;
    }
  }

  render () {
    return (
        <div className="delposition " >
          {this.state.isshow?
            <div className="fivestep">
              <div className="novicetsakbg">
                  <p className= {(this.props.status18==="T"?"testbiaoqian":(this.props.status18==="R"?"priviewbiaoqian":"normalbiaoqian"))+" coursesSort"}  >
                  {this.props.status18==="T"?"体验课":(this.props.status18==="R"?"复习课":this.props.status.classinfo.courseTabVo.tabName)}

                  </p>
              </div>
               <p className="pretime">
                {/* {this.props.status.classinfo.courseTabVo.beginTime} */}
                  <b className="hour">{this.state.hour}</b>:
                  <b className="minute">{this.state.minute}</b>:
                  <b className="second">{this.state.second}</b>
              </p>
               <p className="countDown" >开课倒计时</p>
              <div className="midlehr"></div>
               
              <ul >
                  <li className="lesson">{this.props.status.classinfo.courseTabVo.className}</li>
                  <li className="reader">{this.props.status.classinfo.courseTabVo.englishName}</li>
                  <li className="translate">{this.props.status.classinfo.courseTabVo.chineseName}</li>
              </ul>
              
              {/* <p className="classBegin">{moment(Number(this.props.status.classinfo.courseTabVo.beginTime)).format('MM[月]DD[日] HH:mm')}</p> */}
              {/* <Link  to={'game'}>
                <button type="button" className={(this.props.status18==="T"?"Experiencebutton":(this.props.status18==="R"?"reviewbutton":"Regularclassbutton"))+" btn btn-primary preview"}>课前预习</button>
              </Link> */}
            </div>:""
          }
        </div>
    )
  }
}
export default Preview